## Overview

`Badge` is a React Native component for displaying brief labels or tags with optional variants. If you
want to control style using Tailwind CSS classes, use the `className` and `labelClasses` props.

<Tabs>
  <Tab title="Preview">
    <div style={{ display: 'flex', justifyContent: 'center', gap: '20px' }}>
      <div>
        <img src="https://raw.githubusercontent.com/Mobilecn-UI/nativecn-ui/main/assets/examples/components/badges-light.png" />
        <p>Light mode</p>
      </div>
      <div>
        <img src="https://raw.githubusercontent.com/Mobilecn-UI/nativecn-ui/main/assets/examples/components/badges-dark.png" />
        <p>Dark mode</p>
      </div>
    </div>
  </Tab>
  <Tab title="Code">
    ```jsx
    <View className="flex flex-row gap-2">
      <Badge label="Badge" />
      <Badge label="Badge" variant="secondary" />
      <Badge label="Badge" variant="destructive" />
      <Badge label="Badge" className="bg-amber-400 dark:bg-amber-600" />
      <Badge label="Badge" variant="success" />
    </View>
    ```
  </Tab>
</Tabs>

## Installation

<Tabs>
  <Tab title="CLI">
  ```bash
  npx nativecn-ui add Badge 
  ```
  </Tab>
  <Tab title="Manual">
    <Steps>
      <Step title="First Step">
        Include [Badge.tsx](https://github.com/Mobilecn-UI/nativecn-ui/blob/main/components/Badge.tsx) in your project.
        </Step>
      <Step title="Second Step">
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </Tab>
</Tabs>

## Properties

- `label: string` (required) - The text displayed inside the badge.
- `labelClasses?: string (optional)` - The classes for the label's text.
- `className?: string (optional)` - The classes for the parent container.
- `variant?: Variant` (optional) - The variant of the badge. Can be one of 'default', 'secondary', 'destructive', or 'success'.

## Usage

### Basic usage with `variant`

```jsx
<Badge label="New" />
<Badge label="Archived" variant="secondary" />
<Badge label="Error" variant="destructive" />
<Badge label="Accepted" variant="success" />
```

### Basic usage with custom classes

```jsx
<Badge label="New" className="bg-amber-400" />
<Badge label="Accepted" labelClasses="font-semibold text-lg" />
```
